<script lang="tsx" setup>
/**
 * 头部
 */
import {dateAddZero} from "@/frame/utils/data-helper/add-zero.ts"
import {onMounted, onUnmounted, ref} from "vue"
import {processRequest} from "@/frame/request/constructor.ts"
import {mapKey} from "@/config/key.ts"

/**
 * 定义props
 */
const props = defineProps<{
  refreshTime: any
}>()

/**
 * 定时器
 */
const timer = ref()
const timer2 = ref()

/**
 * 天气、时间数据
 */
const temperature = ref()
const imgData = ref("/cockpit/weather/晴.png")
const timeData = ref()

/**
 * 挂载
 */
onMounted(() => {
  init()
  timer.value = setInterval(() => {
    getTimeData()
  }, 1000)
  timer2.value = setInterval(() => {
    getWeatherData()
  }, 3600000)
})

/**
 * 取消挂载
 */
onUnmounted(() => {
  if (timer.value) {
    clearInterval(timer.value)
  }
  if (timer2.value) {
    clearInterval(timer2.value)
  }
})

/**
 * 初始化
 */
const init = () => {
  getWeatherData()
  getTimeData()
}

const getTimeData = () => {
  const time = new Date()
  const year = time.getFullYear()
  const month = dateAddZero(time.getMonth() + 1)
  const day = dateAddZero(time.getDate())
  const hours = dateAddZero(time.getHours())
  const minutes = dateAddZero(time.getMinutes())
  const seconds = dateAddZero(time.getSeconds())
  timeData.value = year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds
}

const getWeatherData = async () => {
  const result: any = await processRequest.get(`/map/v3/weather/weatherInfo?key=${mapKey}&city=341800&extensions=base`)
  const weather = result?.lives[0]
  temperature.value = weather.temperature
  if (weather.weather === "晴" || weather.weather === "未知") {
    imgData.value = "/img/data-cockpit/header/weather/晴.png"
  } else if (weather.weather === "少云" || weather.weather === "晴间多云" || weather.weather === "多云") {
    imgData.value = "/img/data-cockpit/header/weather/多云.png"
  } else if (weather.weather === "阴" || weather.weather === "平静") {
    imgData.value = "/img/data-cockpit/header/weather/阴.png"
  } else if (weather.weather === "有风" || weather.weather === "微风" || weather.weather === "和风" || weather.weather === "清风" || weather.weather === "强风/劲风" || weather.weather === "疾风" || weather.weather === "大风" || weather.weather === "烈风" || weather.weather === "狂暴风" || weather.weather === "飓风" || weather.weather === "热带风暴" || weather.weather === "龙卷风") {
    imgData.value = "/img/data-cockpit/header/weather/风.png"
  } else if (weather.weather === "霾" || weather.weather === "中度霾" || weather.weather === "重度霾" || weather.weather === "严重霾") {
    imgData.value = "/img/data-cockpit/header/weather/霾.png"
  } else if (weather.weather === "阵雨" || weather.weather === "中雨" || weather.weather === "雨" || weather.weather === "中雨-大雨") {
    imgData.value = "/img/data-cockpit/header/weather/中雨.png"
  } else if (weather.weather === "雷阵雨" || weather.weather === "强雷阵雨") {
    imgData.value = "/img/data-cockpit/header/weather/雷雨.png"
  } else if (weather.weather === "雷阵雨并伴有冰雹") {
    imgData.value = "/img/data-cockpit/header/weather/冰雹.png"
  } else if (weather.weather === "小雨" || weather.weather === "毛毛雨/细雨" || weather.weather === "小雨-中雨") {
    imgData.value = "/img/data-cockpit/header/weather/小雨.png"
  } else if (weather.weather === "大雨" || weather.weather === "强阵雨" || weather.weather === "大雨-暴雨") {
    imgData.value = "/img/data-cockpit/header/weather/大雨.png"
  } else if (weather.weather === "暴雨" || weather.weather === "大暴雨" || weather.weather === "特大暴雨" || weather.weather === "极端降雨" || weather.weather === "暴雨-大暴雨" || weather.weather === "大暴雨-特大暴雨") {
    imgData.value = "/img/data-cockpit/header/weather/暴雨.png"
  } else if (weather.weather === "雨雪天气" || weather.weather === "雨夹雪" || weather.weather === "阵雨夹雪" || weather.weather === "冻雨") {
    imgData.value = "/img/data-cockpit/header/weather/雨加雪.png"
  } else if (weather.weather === "雪" || weather.weather === "阵雪" || weather.weather === "中雪" || weather.weather === "中雪-大雪") {
    imgData.value = "/img/data-cockpit/header/weather/中雪.png"
  } else if (weather.weather === "小雪" || weather.weather === "小雪-中雪") {
    imgData.value = "/img/data-cockpit/header/weather/小雪.png"
  } else if (weather.weather === "大雪" || weather.weather === "大雪-暴雪") {
    imgData.value = "/img/data-cockpit/header/weather/大雪.png"
  } else if (weather.weather === "浮尘" || weather.weather === "扬沙" || weather.weather === "沙尘暴" || weather.weather === "强沙尘暴") {
    imgData.value = "/img/data-cockpit/header/weather/沙尘.png"
  } else if (weather.weather === "雾" || weather.weather === "浓雾" || weather.weather === "强浓雾" || weather.weather === "轻雾" || weather.weather === "大雾" || weather.weather === "特强浓雾") {
    imgData.value = "/img/data-cockpit/header/weather/雾.png"
  } else if (weather.weather === "热") {
    imgData.value = "/img/data-cockpit/header/weather/hot.png"
  } else if (weather.weather === "冷") {
    imgData.value = "/img/data-cockpit/header/weather/cold.png"
  }
}
</script>

<template>
  <div class="header-form">
    <img alt="" class="header-title" src="/img/data-cockpit/header/title.png"/>
    <div class="header-weather">
      <div class="weather-date">
        {{ timeData }}
      </div>
      <div class="weather-line"></div>
      <img :src="imgData" alt="" class="weather-image"/>
      <div class="weather-temperature">{{ temperature || 0 }}°C</div>
    </div>
  </div>
</template>

<style lang="scss" scoped src="./index.scss">

</style>